<template>
	<div class="policyBox">
		<div class="policyTitle">
			<!-- <div class="policyTypeName"
				 :style="'color: ' + formatLabel(policy.typeName).color + '; background-color: ' + formatLabel(policy.typeName).bgColor">
				{{formatLabel(policy.typeName).label}}
			</div> -->
			 <div class="policyTypeName">
				{{ policy.typeName }}
			 </div>
		</div>
		<div class="policyMsg" @click="$router.push({name: 'policyDetail', query: {id: policy.id}})">
			<!-- <div style="display: flex; justify-content: space-between; align-items: center">
				
				<span style="color: #D00000; font-size: 15px; white-space: nowrap">{{policy.approachEnd == 1 && policy.status != 3 ? '即将到期' : ''}}</span>
			</div> -->
			<div class="policyName">{{policy.name}}</div>
			<div class="policyDescriptionDiv">
				<div class="policyDescription">{{policy.description}}</div>
			</div>
			
		</div>
		<div class="policyFooter">
			<div class="policyUnit">发文部门：{{policy.publishUnit.length > 10 ? policy.publishUnit.substr(0, 10) + '...' :  policy.publishUnit}}</div>
			<div class="policyUnit">发文地区：{{policy.radiationArea.length > 10 ? policy.radiationArea.substr(0, 10) + '...' :  policy.radiationArea}}</div>
			<div class="policyDate">发文日期：{{policy.createTime.substr(0, 10)}}</div>
			<div class="policyPv">阅读浏览：{{policy.pv}}次</div>
		</div>
	</div>
</template>

<script>
	import common from '@/utils/common.js'
	import {formatLabel, formatSendBtn} from '@/utils/util.js'

	export default {
		name: "policyFrame",
		data() {
			return {
				policyTypeColors: [{
					color: '#f09450',
					bgColor: '#F7F1EB'
				}, {
					color: '#1abc9c',
					bgColor: '#e2f6f4'
				}, {
					color: '#ff6c6a',
					bgColor: '#ffeef0'
				}]
			}
		},
		props: {
			policy: {
				type: Object,
				default: {}
			},
			index: {
				type: Number
			}
		},
		methods: {
			/**
			 * 跳转到政策详情页面
			 */
			toPolicyDetail: function (policy) {
				let ns = this
				if(!formatSendBtn(policy).canIn) {
					return
				}
				ns.$router.push({path: 'policyDetail', query: {id: policy.id}})
			},
			/**
			 * 格式化标签
			 * @param label 标签名
			 * @return {string|*} 标签名对象
			 */
			formatLabel: function (label) {
				return formatLabel(label)
			},
			/**
			 * 格式化显示政策状态
			 * @param status 政策状态
			 * @return {string|*} 政策状态字符串
			 */
			formatStatus: function (status) {
				if(status == null || status == undefined) {
					return {label: ''}
				}
				for(let i = 0; i < common.policyStatus.length; i++) {
					if(common.policyStatus[i].value == status) {
						return common.policyStatus[i]
					}
				}
				return {label: ''}
			},
			/**
			 * 格式化显示按钮颜色
			 */
			formatBtn: function (policy) {
				return formatSendBtn(policy)
			}
		}
	}
</script>

<style scoped>
	.policyBox {
		margin-bottom: 20px;
		border: 1px solid #e1e1e1;
		position: relative;
		transition: all 0.2s ease 0s;
	}

	.policyBox:hover {
		box-shadow: 0px 5px 5px #e1e1e1;
	}

	.policyBox .policyTitle {
		display: flex;
		justify-content: space-between;
		margin-top: 15px;
	}

	.policyBox .policyTitle .policyTypeName {
		padding: 5px 10px;
		/* background-color: yellow; */
		background: rgb(95, 137, 230, 0.1);
		color: #5f89e6;
		font-size: 12px;
	}

	.policyBox .policyTitle .policyPv {
		display: flex;
		align-items: center;
		margin-right: 30px;
	}

	.policyBox .policyMsg {
		text-align: left;
		margin: 10px;
	}

	.policyBox .policyMsg:hover {
		cursor: pointer;
	}

	.policyBox .policyMsg .policyDate {
		font-size: 15px;
		color: #999999;
	}

	.policyBox .policyMsg .policyName {
		font-size: 16px;
		font-weight: bold;
		margin: 8px 0;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
    color: #333333;
	}

	.policyBox .policyMsg:hover .policyName {
		color: #045db9;
	}

	.policyBox .policyMsg .policyDescriptionDiv {
		height: 30px;
	}

	.policyBox .policyMsg .policyDescriptionDiv .policyDescription {
		font-size: 12px;
		color: #999999;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		line-height: 20px;
		text-align: left;
	}

	.policyBox .policyMsg .policyUnit {
		font-size: 15px;
		margin-top: 30px;
	}

	.policyBox .policyFooter {
		/* display: flex;
		justify-content: space-between;
		align-items: center; */
		/* flex-wrap: wrap; */
		font-size: 12px;
		color: #999999;
		width: calc(100% - 16px);
		border-top: 1px solid #eeeeee;
		margin: 0 8px;
		padding: 10px 0;
		text-align: left;
	}


	.policyBox .policyFooter .policyApproachDay {
		font-size: 12px;
		color: #d00000;
		margin-right: 10px;
	}

	.policyBox .policyFooter .policyBtn {
		padding: 10px 0;
		background-color: #045db9;
		border-radius: 3px;
		font-size: 15px;
		color: #f1f2f4;
		width: 100px;
		transition: all 0.2s ease 0s;
	}

	.policyBox .policyFooter .policyBtn:hover {
		cursor: pointer;
	}

	.policyBox .policyFooter .cantPolicyBtn {
		padding: 10px 0;
		background-color: #f1f2f4;
		border-radius: 3px;
		font-size: 15px;
		color: #999999;
		width: 100px;
	}

	.policyBox .policyFooter .cantPolicyBtn:hover {
		cursor: pointer;
	}
</style>
